<template>
  <div class="table-dom">
    <table style="width: 100%;">
      <thead>
        <tr class="table-title">
          <td></td>
          <td class="guige">Product</td>
          <td>Price</td>
          <td>+/-</td>
          <td>Type</td>
        </tr>
      </thead>
      <tbody>
        <tr
          v-for="(i,index) in list"
          :key="index"
          class="router-link-bg table-item"
          :class="'table-item-'+i.flag"
          @click="getDtails('/priceDetail',i)"
        >
          <td class="table-item-list" @click.stop>
            <van-switch
              v-model="i.select"
              @input="onInput(i)"
              size="14px"
              active-color="#1f87e5"
              inactive-color="#FFF9F0"
            />
            <div class="refuse" v-if="!isLogin || notMember" @click="refuse"></div>
          </td>
          <td class="table-item-list guige">
            <p>{{i.kname}}</p>
          </td>
          <td class="table-item-list table-item-price">
            <p>{{i.price}}</p>
          </td>
          <td class="table-item-list table-item-status">
            <div class="status-but">
              <i>{{i.gain}}</i>
            </div>
          </td>
          <td class="table-item-list">
            <p>{{i.origin}}</p>
          </td>
        </tr>
      </tbody>
    </table>
    <nullDom v-if="nullDomShow" style="color:#697274"></nullDom>
    <loginForm v-if="!isLogin  "></loginForm>
     <notMember></notMember>
  </div>
</template>
<script type="text/ecmascript-6">
import { getchannelpricelist, updateyprice } from "../../api/price";
import loginForm from "../../components/tipsLogin";
import nullDom from "../../components/nulllist/nullList";
import notMember from "./notMember";
export default {
  components: {
    loginForm,
    nullDom,notMember
  },
  data() {
    return {
      list: [],
      isLogin: true,
      nullDomShow: false
    };
  },
  computed: {
    pricepartObj() {
      return this.$store.state.nocaches.pricepartObj;
    },
    selfDel() {
      return this.$store.state.nocaches.delprice;
    },
   notMember() {
      return this.$store.state.nocaches.notMemberobj.notMember;
    }
  },
  watch: {
    notMember(n, o) {
      return n;
    },
    selfDel(news, old) {
      this.list.forEach(element => {
        if (element.id == news.id) {
          element.select = false;
        }
      });
    },
    pricepartObj(news, old) {
      this.channelpricelist();
    }
  },
  methods: {
    refuse() {
      if (this.$store.state.nocaches.notMemberobj.notMember) {
        this.$store.commit("munotMember", {
          notMember: true, //是否是该频道会员
          notMembershow: true
        });
        return false;
      }
      if (!this.isLogin) {
        this.$store.commit("muloginmoduleshow", true);
        return false;
      }
    },
    getDtails(url, query) {
      if (this.$store.state.nocaches.notMemberobj.notMember) {
        this.$store.commit("munotMember", {
          notMember: true, //是否是该频道会员
          notMembershow: true
        });
        return false;
      }
      if (!this.isLogin) {
        this.$store.commit("muloginmoduleshow", true);
        return false;
      }
      this.$router.push({ path: url, query: query });
    },
    channelpricelist() {
      let obj = this.$store.state.nocaches.pricepartObj;
      getchannelpricelist(obj).then(res => {
        if (res.code == "0000") {
           this.list =[];
           this.$store.commit("munotMember", {
          notMember: false  , //是否是该频道会员
          notMembershow: false
        });
          this.isLogin = true;
          if (res.data.length == 0) {
            this.nullDomShow = true;
            return false;
          } else {
            this.nullDomShow = false;
            for (let index = 0; index < res.data.length; index++) {
              const element = res.data[index];
              if (element.select == 1) {
                element.select = true;
              } else {
                element.select = false;
              }
              if (element.flag == "normal") {
                element.gain = "--";
                element.per = "--";
              }  
            }
          }
          this.list = res.data;
        } else if (res.code == "0007" || res.code == "0009") {
         if (res.code == "0007") {
           
            this.$store.commit("munotMember", {
              notMember: true, //是否是该频道会员
              notMembershow: true
            });
          } else {
            this.isLogin = false;
          }
          this.list = [];
          if (res.data.length == 0) {
            this.nullDomShow = true;
            return false;
          }
          this.nullDomShow = false;
          for (let index = 0; index < res.data.length; index++) {
            const element = res.data[index];
            element.select = false;
          }
          this.list = res.data;
        }
      });
    },

    onInput(i) {
      let obj = {};
      obj.channel = i.channel;
      obj.id = i.id;
      if (i.select) {
        obj.op = "add";
      } else {
        obj.op = "del";
      }
      this.updateyprice(obj);
    },
    updateyprice(obj) {
      updateyprice(obj).then(res => {
        if (res.code == "0000") {
          this.$store.dispatch("acLoginprice", obj);
        } else {
          this.$toast(res.msg);
        }
      });
    }
  },
  created() {
    this.channelpricelist();
  },
 
};
</script>
<style scoped lang="less">
.table-dom {
  background: #ffffff;
  .table-title {
    height: 0.72rem;
    line-height: 0.72rem;
    background: rgba(243, 246, 249, 1);
    font-size: 0.28rem;
    text-align: center;
    color: rgba(105, 114, 116, 1);
  }
  .table-item {
    min-height: 1.08rem;
    padding: 0.2rem 0;
    padding: 0.4rem 0;
    text-align: center;
    color: rgba(39, 41, 55, 1);
    font-size: 0.26rem;
    line-height: 1.5;
    border-bottom: 0.02rem solid rgba(243, 246, 249, 1);
    table-layout: fixed;
    table-layout: fixed;
    word-wrap: break-word;
    word-break: keep-all;
    word-wrap: break-word;

    td {
      position: relative;
      padding: 0.2rem 0rem;
      p {
        padding: 0 0.1rem;
      }
      &:last-child {
        width: 1.5rem;
      }
      .refuse {
        width: 100%;
        height: 1.08rem;
        position: absolute;
        top: 0;
        left: 0;
        // background: red;
        z-index: 1;
      }
    }
    .guige {
      width: 30%;
    }
    .status-but {
      font-size: 0.24rem;
      background: rgba(243, 246, 249, 1);
      line-height: 0.4rem;
      position: relative;
      border-radius: 0.05rem;
      overflow: hidden;
      display: inline;
      padding: 0.05rem 0.2rem;
      color: rgba(105, 114, 116, 1);
    }
    &.table-item-down {
      .table-item-price {
        color: #37a10c;
      }
      .status-but {
        background: #00af49;
        color: #ffffff;
      }
    }
    &.table-item-up {
      .table-item-price {
        color: #d82d27;
      }
      .status-but {
        background: #d82d27;
        color: #ffffff;
      }
    }
  }
}
</style>
